<template>
  <button @click="sendCodeBtn" class="code">{{ time === 60 ? '发送验证码' : `${time}秒` }}</button>
</template>

<script>
import { onUnmounted, ref } from 'vue'
export default {
  setup() {
    const time = ref(60)
    let timerId = null
    const sendCodeBtn = () => {
      time.value--
      clearInterval(timerId)
      // console.log('发送验证码')
      timerId = setInterval(() => {
        console.log('定时器正在运行中.....')
        time.value--
        if (time.value <= 0) {
          clearInterval(timerId)
          time.value = 60
        }
      }, 1000)
    }

    onUnmounted(() => {
      clearInterval(timerId)
    })
    return { sendCodeBtn, time }
  }
}
</script>

<style>
</style>
